<template>
  <div>
    <el-dialog
      title="浏览建筑群"
      :visible.sync="dialogVisible"
      width="45%">
      <div>
        <el-form :model="form"  label-position="right" label-width="100px" ref="formone">
          <el-row>
                <el-col :span="12">
                  <el-form-item label="建筑群"  prop="name">
                    <el-input v-model="form.name" size="small" placeholder="请输入建筑群"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收费单位" prop="companyName">
                    <el-input v-model="form.companyName" size="small" placeholder="请输入收费单位"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="12">
                  <el-form-item label="企业识别码" prop="identityCode">
                    <el-input v-model="form.identityCode" size="small" placeholder="请输入企业识别码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="管理员姓名" prop="manageUserName">
                    <el-input v-model="form.manageUserName" size="small" placeholder="请输入管理员姓名"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="12">
                  <el-form-item label="管理员账号" prop="manageUserMobile">
                    <el-input v-model="form.manageUserMobile" size="small" placeholder="请输入管理员账号"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="img">
                  <img
                    :src="'data:image/png;base64,' + form.imageBase64"
                    class="item-img"/>
                    <p>{{ form.name }} <i class="el-icon-check"></i></p>
                </div>
                <el-row>
              <el-col :span="12">
                <el-form-item label="企业名称" prop="companyName">
                  <el-input v-model="form.companyName" size="small" placeholder="请输入企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税号" prop="enterpriseCode">
                  <el-input v-model="form.enterpriseCode" size="small" placeholder="请输入税号"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="行业类别" prop="industryCategory">
                  <el-select style="width: 100%;" v-model="form.industryCategory" size="small" placeholder="请选择行业类别" @change="changeleibie">
                    <el-option v-for="(item,index) in leibielist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业分类" prop="industryType">
                  <el-select style="width: 100%;" v-model="form.industryType" size="small" placeholder="请选择行业分类" @change="changefenlei">
                    <el-option v-for="(item,index) in fenleilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="24">
                <el-form-item label="营业范围" prop="businessScopeDetail">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.businessScopeDetail">
                  </el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="省" prop="province">
                  <el-select style="width: 100%;" v-model="form.province" size="small" placeholder="请选择省" @change="changeprovince">
                    <el-option v-for="(item,index) in provinceArr" :label="item.text" :value="item.value" :key="index" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="市" prop="city">
                  <el-select style="width: 100%;" v-model="form.city" size="small" placeholder="请选择收费类型" @change="changecity">
                    <el-option v-for="(item,index) in citylist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="区" prop="county">
                  <el-select style="width: 100%;" v-model="form.county" size="small" placeholder="请选择收费类型" @change="changecounty">
                    <el-option v-for="(item,index) in countyarr" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="用电地址" prop="address">
                  <el-input v-model="form.address" size="small" placeholder="请输入用电地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户日期" prop="createDate">
                  <el-input v-model="form.createDate" size="small" placeholder="请输入开户日期"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="充值途径" prop="rechargeChannels">
                  <el-select style="width: 100%;" multiple v-model="form.rechargeChannels" size="small" placeholder="请选择充值途径">
                    <el-option v-for="(item,index) in chongzhilist" :label="item.text" :value="item.value" class="option" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="图片" prop="name">
                    <img  :src="form.imageUrl" class="avatar">
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col>
                <el-form-item label="联系人">
                    <i @click="addcontact" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i>
                </el-form-item>
              </el-col>
             </el-row>
             <template>
              <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contact" :key="index">
                <el-row >
                  <el-col :span="12">
                    <el-form-item :label="'联系人'+(index+1)" prop="name">
                      <el-input v-model="Contact[index].CONTACTSNAME" size="small" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="'联系电话'+(index+1)" prop="name">
                      <el-input style="width: 90%;" v-model="Contact[index].CONTACTSPHONE" size="small" placeholder="请输入联系电话"></el-input>
                      <span @click="removeContact(index)">
                        <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                      </span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
             </template>
             <el-divider class="fengex"></el-divider>
                <el-row>
                  <el-col>
                    <el-form-item label="收费类型">
                        <i @click="addcontacttype" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i>
                    </el-form-item>
                  </el-col>
                </el-row>
                <template>
                    <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contacttype" :key="index+1">
                      <el-row>
                        <el-col :span="24">
                           <el-form-item :label="'能源类型'+(index+1)">
                            <el-radio-group v-model="Contacttype[index].ENERGYTYPE">
                                <el-radio v-for="(item,index) in nengyuanlist" :key="index" :label="item.value">{{ item.text }}</el-radio>
                              </el-radio-group>
                           </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row >
                        <el-col :span="12">
                          <el-form-item :label="'收费类型'+(index+1)" prop="name">
                            <el-select v-model="Contacttype[index].FEETYPE" size="small" placeholder="请输入收费类型" style="width: 100%;">
                              <el-option v-for="(item,index) in shoufeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item :label="'控制方式'+(index+1)" prop="name">
                            <el-select style="width: 90%;" v-model="Contacttype[index].FEECONTROL" size="small" placeholder="请输入控制方式">
                              <el-option v-for="(item,index) in kongzhilist" :label="item.text" :key="index" class="option" :value="item.value"></el-option>
                            </el-select>
                            <span @click="removeContacttype(index)">
                              <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                            </span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                </template>
        </el-form>
      </div>
      <span  slot="footer">
        <button class="button" @click="quxiao">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CallPoliceLookBuild',

  data() {
    return {
      dialogVisible: false,
      form: {},
      leibielist: [],
      fenleilist: [],
      provinceArr: [],
      citylist: [],
      countyarr: [],
      chongzhilist: [],
      nengyuanlist: [],
      shoufeilist: [],
      kongzhilist: [],
      Contact: [
        {CONTACTSNAME:'',CONTACTSPHONE:'',SMSNOTCIE:'F'}
      ],
      Contacttype: [
        {FEECONTROL:'',FEETYPE:'',ENERGYTYPE:''}
      ],
    };
  },

  mounted() {
    
  },

  methods: {
    quxiao() {
      this.dialogVisible = false
    },
   // 删除联系人
   removeContact(index) {
      if(this.Contact.length==1) return this.$message.warning('最后一项不可删除')
      this.Contact.splice(index,1)
    },
    // 添加联系人
    addcontact() {
      this.Contact.push({CONTACTSNAME:'',CONTACTSPHONE:'',SMSNOTCIE:'F'})
    },
    // 删除收费类型
    removeContacttype(index) {
      if(this.Contacttype.length==1) return this.$message.warning('最后一项不可删除')
      this.Contacttype.splice(index,1)
    },
    // 添加收费类型
    addcontacttype() {
      this.Contacttype.push({FEECONTROL:'',FEETYPE:'',ENERGYTYPE:''})
    },
    changeprovince(val) {
      
    },
    changecity() { },
    changecounty() { },
    changeleibie() { },
    changefenlei(){}
  },
};
</script>

<style scoped>
.button{
  width: 60px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid #ccc;
}
::v-deep .dialog-footer{
  width: 100%;
  text-align: center;
}
.img{
        width: 181px;
        height: 130px;
        border: 1px solid skyblue;
        img{
          width: 180px;
          height: 100px;
          vertical-align: middle;
        }
        p{
          text-align: center;
          .el-icon-check{
            color: #81b337;
            font-size: 20px;
          }
        }
      }
</style>